<!-- ScrollView子组件 -->
<template>
  <div class="scroll-view">
    <div class="scroll_Xtags">
      <div class="tags_box">
        <div class="tags" v-for="(item, index) in title" :key="item.id">
          <div :class="{ isActive: index === active }" @click="changeToggle(index)">{{ item }}</div>
        </div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ScrollView',
  props: {
  	title: {
  		type: Array,
  		default: () => []
  	},
	active: {
		type: Number
	}
  },
  data() {
    return {

    };
  },
  methods: {
    changeToggle(index) {
	  this.$emit('toggle', index); // 触发名为'toggle'的自定义事件，并传递index参数
    }
  }
};
</script>

<style lang="less">
.scroll-view {
  display: flex;
  flex-direction: column;
}

.scroll_Xtags {
  display: flex;
  overflow: scroll;
  overflow-x: auto;
  white-space: nowrap;

  &::-webkit-scrollbar {
    /* Hide or disable the scrollbar */
    display: none;
  }

  .tags_box {
    display: flex;

    .tags {
      div {
        padding: 2vw 5vw;
        cursor: pointer;
      }

      .isActive {
        border-bottom: 5px solid #d58009;
      }
    }
  }
}
</style>